<!-- 测评人员管理 -->
<template>
  <div class="mod-assess__assessuser">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <!-- 姓名 -->
      <!-- 标题、分类、类型、是否热门、是否推荐 -->
      <el-form-item label="分类" prop="course" class="full">
        <el-select v-model="state.dataForm.subjectId" placeholder="选择分类" style="width: 150px">
          <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="类型" prop="type" class="full">
        <el-select v-model="state.dataForm.type" placeholder="选择类型" style="width: 150px">
          <el-option v-for="item in eduTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="是否推荐" prop="isRecommend">
        <el-select v-model="state.dataForm.isRecommend" style="width: 150px">
          <el-option label="请选择" value="" />
          <el-option label="是" value="1" />
          <el-option label="否" value="0"  />
        </el-select>

        <!-- <el-switch v-model="state.dataForm.isRecommend" inline-prompt :active-value="1" :inactive-value="0" active-text="是"
          inactive-text="否" /> -->
      </el-form-item>
      <el-form-item label="是否热门" prop="isHot" >
          <el-select v-model="state.dataForm.isHot" style="width: 150px">
          <el-option label="请选择" value="" />
          <el-option label="是" value="1" />
          <el-option label="否" value="0"  />
        </el-select>
        <!-- <el-switch v-model="state.dataForm.isHot" inline-prompt :active-value="1" :inactive-value="0" active-text="是"
          inactive-text="否" /> -->
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('assess:subject:save')" type="primary" @click="addOrUpdateHandle()">单个上传</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('assess:subject:save')" type="primary" @click="batchAddUpdateHandle()">批量上传</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
      <el-table-column prop="title" label="标题" header-align="center" align="center" width="380"></el-table-column>
      <el-table-column prop="subjectName" label="分类" header-align="center" align="center"></el-table-column>
      <!-- <el-table-column prop="type" label="类型" header-align="center" align="center" >
        <template v-slot="scope">
          <span size="small" type="success">{{ eduTypeList.find((edu: any) => edu.value == scope.row.type).label }}</span>
        </template>
      </el-table-column> -->
      
      <el-table-column prop="isRecommend" label="是否推荐" header-align="center" align="center">
        <template v-slot="scope">
          <el-switch v-model="scope.row.isRecommend" inline-prompt :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" disabled/>
        </template>
      </el-table-column>
      <el-table-column prop="isHot" label="是否热门" header-align="center" align="center">
        <template v-slot="scope">
          <el-switch v-model="scope.row.isHot" inline-prompt :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" disabled />
        </template>
      </el-table-column>
      <el-table-column prop="content" label="备注" header-align="center" align="center"></el-table-column>


      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" >
        <template v-slot="scope">
          <el-button  type="primary" link @click="addOrUpdateHandle(scope.row)">{{ $t("update") }}</el-button>
          <el-button type="danger" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
    <batch-add-upload :key="addKey" ref="batchAddUpdateRef" @refreshDataList="state.getDataList"></batch-add-upload>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./single-subject-add.vue";
import batchAddUpload from "./batch-subject-add.vue";
import baseService from "@/service/baseService";
import { EduTypeList } from '@/constants/subject'

const view = reactive({
  getDataListURL: "/edu/subject/file/page",
  getDataListIsPage: true,
  exportURL: "/assess/user/export",
  deleteURL: "/edu/subject/file",
  deleteIsBatch: true,
  dataForm: {
    content: "",
    subjectId: "",
    subjectName: "",
    type: "",
    fileUrl: "",
    isHot: '',
    isRecommend: '',
    order: "desc",
    orderField: "create_date"
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });
const courseList = ref();
const gradeList = ref();

const eduTypeList = ref(EduTypeList);

onMounted(() => {
  handleSubjectList();
  handleGradeList();
});

const handleSubjectList = async () => {
  try {
    const res = await baseService.get('/edu/subject/list')
    if (res.code == 0) {
      courseList.value = res.data;
    }
  } catch (error) {
    console.log('jj-error', error);

  }
}

const handleGradeList = async () => {
  try {
    const res = await baseService.get('/edu/grade/list')
    if (res.code == 0) {
      gradeList.value = res.data;
    }
  } catch (error) {
    console.log('jj-error', error);
  }
}

const addKey = ref(0);
const addOrUpdateRef = ref();
const batchAddUpdateRef = ref();
const addOrUpdateHandle = (row: any) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(row);
  });
};
const batchAddUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    batchAddUpdateRef.value.init();
  });
};
</script>